<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>业主爱家</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen"
	type="text/css" />

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">

function checks(id) {
	alert(id)
	$("#update").val(id);
	$.getJSON("houseDetails",{id : id},
	function(data) {		
	var html = "";
	
		html += "<tr>";
		html += "<td>业主真实姓名:</td>";
		html += "<td><input type='text' name='name' value='" + data["user"]["name"] + "'/></td>";
		html += "</tr>";
		html += "<tr>";
		html += "<td>联系电话:</td>";
		html += "<td><input type='text' name='phone' value='" + data["user"]["phone"] + "'/></td>";
		html += "</tr>";
	
		  $("#myTable").children().remove();
		  $("#myTable").append(html);
	});
	return false;
}


	  $(function(){
		    $("#deriveExcel").click(function(){
		    	$.get("deriveExcel",{username:$(this).val()},function(data){
					  if(data!=null || data!="" ){
						  $("#downloadName").text(data);
						  $("#downloadExcel").attr("href","downloadExcel?filename="+data);
						  $("#jj").css("display","block");
						  alert("导出成功！");
					  }else {
						  alert("导出失败！");
					  }
				  })	
		    })
		     $("#importTemplate").click(function(){
		    	$.get("importTemplate",{username:$(this).val()},function(data){
					  if(data!=null || data!=""){
						  $("#downloadtName").text(data);
						  $("#hh").css("display","block");
						  $("#downloadTemplate").attr("href","downloadTemplate?filename="+data);
						  alert("导出模板成功！");
					  }else {
						  alert("导出模板失败！");
					  }
				  })	
		    })
		     $("#inquire").click(function(){
		    	 $("#myForm").attr("action","houseList");
		    	 $("#myForm").attr("method","get");
		    	 $(".form-horizontal").submit();  
		    })
		      $("#importExcel").click(function(){
		    	   var selectedFile = document.getElementById('excel').files[0];
		    	   var name = selectedFile.name;//读取选中文件的文件名
		            alert(name);
		    	   if(name !=null){
		    		   $("#myForm").attr("action","importExcel");
				       $("#myForm").attr("method","post");
				       $(".form-horizontal").submit();  
		    	   }else {
		    		   alert("");  
		    	   }
		    	
		    })
		    
	  })
	
</script>
</head>
<body style="width: 100%;">
   <!--右边内容栏-->
	<div id="content">
		<div id="conTitle">&nbsp;| 房屋列表</div>
		<div>
			<div id="function">
				 <form  id="myForm" class="form-horizontal" action="" method="get" enctype="multipart/form-data">
                   <c:if test="${user.userRole.name!='业主'}"><a id="importExcel">导入excel</a>&nbsp;&nbsp;<input type="file" name="excel"  id="excel"/></c:if><a id="deriveExcel" >导出excel</a>
                    &nbsp;&nbsp;<c:if test="${user.userRole.name!='业主'}"><a id="importTemplate">导出模板</a></c:if>&nbsp;&nbsp;<label style="padding-left:400px;">关键字&nbsp;&nbsp;:&nbsp;&nbsp;</label><input type="text" name="Name"/>&nbsp;&nbsp;<a id="inquire" style="text-decoration: none;">查询</a>
                    <p style="display: none;" id="jj"><span id="downloadName"></span><a href="" id="downloadExcel">下载Excel</a></p> 
                    <p style="display: none;" id="hh"><span id="downloadtName"></span><a href="" id="downloadTemplate">下载Excel模板</a></p> 
                </form>
			</div>
			<table id="myHouse">
				<tr>
					<th style="width: 13%;">业主真实姓名</th>
					<th style="width: 8%;">所在楼栋</th>
					<th style="width: 18%;">所在房屋</th>
					<th style="width: 23%;">联系电话</th>
					<th style="width: 8%;">状态</th>
					<th style="width: 18%;">操作</th>
				</tr>
				
				<c:forEach var="list" items="${list}">
					<tr>
						<th style="width: 13%;">${list.user.name}</th>
						<th style="width: 8%;">${list.tower}</th>
						<th style="width: 18%;">${list.houseIN}</th>
						<th style="width: 23%;">${list.user.phone}</th>
						<th style="width: 8%;">${list.status}</th>
						<th><a href="houseDetail?id=${list.id}">查看详情</a>&nbsp;&nbsp;|<a
							data-toggle="modal" data-target="#myModal"
							onclick="checks(${list.id})">修改</a>&nbsp;&nbsp;</th>
					</tr>
				</c:forEach>
			</table>
		</div>
	</div>
	<form action="updateUser" method="post">
		<input type="hidden" id="update" name="id" value="" />
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">编辑房屋信息</h4>
					</div>
					<form class="modal-body">
						<table id="myTable">

						</table>
					</form>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary">确定修改</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
	</form>
</body>
</html>